<template>
  <div id="app">
    <!-- <div class="button">
      <div class="row">
        <hack-button>按钮</hack-button>
        <hack-button type="primary" @click="show">按钮1</hack-button>
        <hack-button type="success">按钮2</hack-button>
        <hack-button type="info">按钮3</hack-button>
        <hack-button type="warning">按钮4</hack-button>
        <hack-button type="danger">按钮5</hack-button>
      </div>
      <div class="row">
        <hack-button plain>按钮</hack-button>
        <hack-button plain type="primary">按钮1</hack-button>
        <hack-button plain type="success">按钮2</hack-button>
        <hack-button plain type="info">按钮3</hack-button>
        <hack-button plain type="warning">按钮4</hack-button>
        <hack-button plain type="danger">按钮5</hack-button>
      </div>
      <div class="row">
        <hack-button round plain>按钮</hack-button>
        <hack-button round plain type="primary">按钮1</hack-button>
        <hack-button round plain type="success">按钮2</hack-button>
        <hack-button round plain type="info">按钮3</hack-button>
        <hack-button round plain type="warning">按钮4</hack-button>
        <hack-button round plain type="danger">按钮5</hack-button>
      </div>
      <div class="row">
        <hack-button circle plain>拆</hack-button>
        <hack-button circle plain type="primary">拆</hack-button>
        <hack-button circle plain type="success">拆</hack-button>
        <hack-button circle plain type="info">拆</hack-button>
        <hack-button circle plain type="warning">拆</hack-button>
        <hack-button circle plain type="danger">拆</hack-button>
      </div>
      <div class="row">
        <hack-button circle icon="hack-icon-delete" plain>df</hack-button>
        <hack-button circle icon="hack-icon-delete" plain type="primary"></hack-button>
        <hack-button circle icon="hack-icon-delete" plain type="success"></hack-button>
        <hack-button circle icon="hack-icon-delete" plain type="info"></hack-button>
        <hack-button circle icon="hack-icon-delete" plain type="warning"></hack-button>
        <hack-button circle icon="hack-icon-delete" plain type="danger"></hack-button>
      </div>
      <div class="row">
        <hack-button :disabled="false" circle icon="hack-icon-delete" plain @click="show"></hack-button>
        <hack-button :disabled="true" circle icon="hack-icon-delete" plain type="primary"></hack-button>
        <hack-button disabled circle icon="hack-icon-delete" plain type="success"></hack-button>
        <hack-button disabled circle icon="hack-icon-delete" plain type="info"></hack-button>
        <hack-button disabled circle icon="hack-icon-delete" plain type="warning"></hack-button>
        <hack-button disabled circle icon="hack-icon-delete" plain type="danger"></hack-button>
      </div>
    </div> -->
    <div class="dialog">
      <HackDialog :title="'温馨提示'" width="500px" top="100px" :visible.sync="visible">
        <!-- <template #title>
          <h1>带标签的插槽</h1>
        </template> -->
        <template>
          <div>
            这是默认插槽的文本
          </div>
        </template>
        <template #footer>
          <div>
            <hack-button @click="visible = false">取消</hack-button>
            <hack-button type="primary" @click="visible = false">确定</hack-button>
          </div>
        </template>
      </HackDialog>
    </div>
    <hack-button type="primary" @click="visible = true">按钮</hack-button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      visible: false
    }
  },
  methods: {
    show(){
      alert(123)
    }
  },
}
</script>

<style>
  .row { margin: 10px;}
</style>
